<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, onUnmounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
// 简化图标导入，使用通配符导入所有图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

// 引入通用组件
import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";

// 引入子组件
import SchoolHireBanner from "./components/SchoolHireBanner.vue";
import SchoolHireFilter from "./components/SchoolHireFilter.vue";
import SchoolHireViewSwitch from "./components/SchoolHireViewSwitch.vue";
import SchoolHireCard from "./components/SchoolHireCard.vue";
import SchoolHireDetail from "./components/SchoolHireDetail.vue";
import SchoolHireCalendar from "./components/SchoolHireCalendar.vue";
import SchoolHireLive from "./components/SchoolHireLive.vue";
import SchoolHireCompany from "./components/SchoolHireCompany.vue";
import SchoolHireActivityList from "./components/SchoolHireActivityList.vue";

// 路由
const router = useRouter();

// 视图模式
const viewMode = ref("list");

// 加载状态
const loading = ref(false);
const noMore = ref(false);
const disabled = ref(false);
const totalCount = ref(30);

// 活动列表和选中ID
interface HireItem {
    id: string;
    title: string;
    companyName: string;
    companyLogo: string;
    startTime: string;
    endTime: string;
    location: string;
    mode: string;
    tags: string[];
    status: string;
    targetSchools: string[];
    targetMajors: string[];
    companyIndustry: string;
    companySize: string;
    companyDescription: string;
    description: string;
    positions: Array<{
        name: string;
        count: number;
        workLocation: string;
        education: string;
        majors: string[];
        description: string;
        requirements: string;
    }>;
}

const hireList = ref<HireItem[]>([]);
const selectedHireId = ref("");
const selectedHire = ref<HireItem | null>(null);

// 页面滚动位置
const scrollTop = ref(0);
const showBackToTop = ref(false);

// 当前激活的tab
const activeTab = ref("list");

// 添加热门校招相关的数据变量
const activeJobCategory = ref("all");

// 热门校招职位数据
const hotJobs = ref([
    {
        id: "hot1",
        title: "综合管理类",
        salary: "8-12K",
        location: "天津",
        experience: "经验不限",
        education: "本科",
        companyId: "1",
        companyName: "正邦集团",
        companyLogo: "https://via.placeholder.com/40",
        companyStatus: "已上市",
    },
    {
        id: "hot2",
        title: "高中一对一物理老师",
        salary: "10-15K",
        location: "天津",
        experience: "经验不限",
        education: "本科",
        companyId: "2",
        companyName: "天津新东方",
        companyLogo: "https://via.placeholder.com/40",
        companyStatus: "已上市",
    },
    {
        id: "hot3",
        title: "国企 管培生 人事行政员",
        salary: "6-10K",
        location: "天津",
        experience: "经验不限",
        education: "本科",
        companyId: "3",
        companyName: "中国人寿",
        companyLogo: "https://via.placeholder.com/40",
        companyStatus: "已上市",
    },
    {
        id: "hot4",
        title: "利安隆新材料招聘生产安全员",
        salary: "6-8K",
        location: "天津",
        experience: "经验不限",
        education: "本科",
        companyId: "4",
        companyName: "利安隆新材料",
        companyLogo: "https://via.placeholder.com/40",
        companyStatus: "已上市",
    },
    {
        id: "hot5",
        title: "销售管培生（B端销售）",
        salary: "10-15K",
        location: "天津",
        experience: "经验不限",
        education: "本科",
        companyId: "5",
        companyName: "欧麦食品股份有限公司",
        companyLogo: "https://via.placeholder.com/40",
        companyStatus: "已上市",
    },
    {
        id: "hot6",
        title: "（悦动招聘）数据治理工程师",
        salary: "12-15K",
        location: "天津",
        experience: "经验不限",
        education: "硕士",
        companyId: "6",
        companyName: "北京爱锐科",
        companyLogo: "https://via.placeholder.com/40",
        companyStatus: "已上市",
    },
    {
        id: "hot7",
        title: "青英计划（销售）J12487",
        salary: "7-10K",
        location: "天津",
        experience: "经验不限",
        education: "本科",
        companyId: "7",
        companyName: "青岛啤酒股份有限公司",
        companyLogo: "https://via.placeholder.com/40",
        companyStatus: "已上市",
    },
    {
        id: "hot8",
        title: "银行2025届优才生培训",
        salary: "8-13K",
        location: "天津",
        experience: "经验不限",
        education: "本科",
        companyId: "8",
        companyName: "招商银行信用卡中心",
        companyLogo: "https://via.placeholder.com/40",
        companyStatus: "已上市",
    },
]);

// 下拉刷新相关
const isRefreshing = ref(false);
const refreshDistance = ref(0);
const refreshThreshold = 100; // 下拉刷新阈值
const touchStartY = ref(0);

// 触摸开始事件处理
const handleTouchStart = (e) => {
    if (window.scrollY === 0) {
        touchStartY.value = e.touches[0].clientY;
        document.addEventListener("touchmove", handleTouchMove, { passive: false });
        document.addEventListener("touchend", handleTouchEnd);
    }
};

// 触摸移动事件处理
const handleTouchMove = (e) => {
    if (touchStartY.value > 0) {
        const touchY = e.touches[0].clientY;
        const distance = touchY - touchStartY.value;

        if (distance > 0) {
            e.preventDefault(); // 阻止默认滚动
            refreshDistance.value = Math.min(distance / 2, 120); // 限制最大下拉距离
        }
    }
};

// 触摸结束事件处理
const handleTouchEnd = () => {
    if (refreshDistance.value >= refreshThreshold) {
        // 触发刷新
        triggerRefresh();
    }

    // 重置状态
    refreshDistance.value = 0;
    touchStartY.value = 0;

    // 移除事件监听
    document.removeEventListener("touchmove", handleTouchMove);
    document.removeEventListener("touchend", handleTouchEnd);
};

// 触发刷新
const triggerRefresh = () => {
    isRefreshing.value = true;

    // 模拟刷新数据
    setTimeout(() => {
        // 重新加载数据
        loadHireList(true);

        // 随机更新热门职位顺序
        hotJobs.value = [...hotJobs.value].sort(() => Math.random() - 0.5);

        // 显示刷新成功提示 - 修复ElMessage调用
        ElMessage.success("刷新成功");

        isRefreshing.value = false;
    }, 1500);
};

// 职位筛选功能
const filteredJobs = computed(() => {
    if (activeJobCategory.value === "all") {
        return hotJobs.value;
    }

    // 根据不同类别进行筛选
    switch (activeJobCategory.value) {
        case "management":
            return hotJobs.value.filter((job) => job.title.includes("管培") || job.title.includes("管理"));
        case "teacher":
            return hotJobs.value.filter((job) => job.title.includes("教师") || job.title.includes("老师"));
        case "bank":
            return hotJobs.value.filter((job) => job.title.includes("银行") || job.companyName.includes("银行"));
        case "stateOwned":
            return hotJobs.value.filter((job) => job.title.includes("国企") || job.companyName.includes("中国"));
        case "foreign":
            return hotJobs.value.filter((job) => job.companyName.includes("国际") || job.companyName.includes("外企"));
        default:
            return hotJobs.value;
    }
});

// 添加职位收藏功能
const collectJob = (jobId, event) => {
    event.stopPropagation(); // 阻止冒泡，避免触发卡片点击事件

    // 模拟收藏操作 - 修复ElMessage调用
    ElMessage.success("收藏成功");

    // 实际项目中应该调用API添加收藏
    console.log("收藏职位:", jobId);
};

// 添加分享功能
const shareJob = (job, event) => {
    event.stopPropagation(); // 阻止冒泡

    // 构建分享文本
    const shareText = `【校招职位】${job.title} | ${job.companyName} | 薪资${job.salary}`;

    // 模拟分享操作，实际项目中可能需要调用原生分享API
    if (navigator.share) {
        navigator
            .share({
                title: "校招职位分享",
                text: shareText,
                url: window.location.href,
            })
            .then(() => console.log("分享成功"))
            .catch((error) => console.log("分享失败", error));
    } else {
        // 复制到剪贴板
        const textArea = document.createElement("textarea");
        textArea.value = shareText + " - " + window.location.href;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand("copy");
        document.body.removeChild(textArea);

        // 修复ElMessage调用
        ElMessage.success("分享链接已复制到剪贴板");
    }
};

// 搜索和筛选相关变量
const searchKeyword = ref("");
const industryFilter = ref("");
const timeFilter = ref("");
const modeFilter = ref("");
const sortOrder = ref("time");

// 日历相关变量和方法
const calendarMonth = ref(new Date().toISOString().substring(0, 7)); // YYYY-MM格式
const calendarView = ref("month");

// 日历导航方法
const changeCalendarMonth = (val) => {
    calendarMonth.value = val;
};

const prevMonth = () => {
    const date = new Date(`${calendarMonth.value}-01`);
    date.setMonth(date.getMonth() - 1);
    calendarMonth.value = date.toISOString().substring(0, 7);
};

const nextMonth = () => {
    const date = new Date(`${calendarMonth.value}-01`);
    date.setMonth(date.getMonth() + 1);
    calendarMonth.value = date.toISOString().substring(0, 7);
};

const goToday = () => {
    calendarMonth.value = new Date().toISOString().substring(0, 7);
};

// 关闭详情
const closeDetail = () => {
    selectedHireId.value = "";
    selectedHire.value = null;
};

// 处理筛选和搜索
const handleSearch = (keyword) => {
    console.log("搜索关键词:", keyword);
    // 实际项目中应调用API进行搜索
    loadHireList(true);
};

const handleFilterChange = (filterData) => {
    console.log("筛选条件变化:", filterData);
    // 实际项目中应根据筛选条件调用API
    loadHireList(true);
};

// 处理视图切换
const handleViewChange = (mode) => {
    viewMode.value = mode;
    if (mode === "list") {
        activeTab.value = "list";
    } else if (mode === "calendar") {
        activeTab.value = "calendar";
    }
};

// 处理排序方式变化
const handleSortChange = (type) => {
    console.log("排序方式:", type);
    // 实际项目中应根据排序方式调用API
    loadHireList(true);
};

// 选择招聘活动
const selectHire = (id) => {
    selectedHireId.value = id;
    const hire = hireList.value.find((item) => item.id === id);
    selectedHire.value = hire || null; // 确保不会赋值undefined
};

// 加载招聘活动列表
const loadHireList = (reset = false) => {
    if (loading.value) return;

    if (reset) {
        hireList.value = [];
        noMore.value = false;
    }

    loading.value = true;
    disabled.value = true;

    // 模拟API调用
    setTimeout(() => {
        // 使用模拟数据
        const mockHireData = [
            {
                id: "1",
                title: "2023秋季校园招聘宣讲会",
                companyName: "腾讯科技",
                companyLogo: "https://via.placeholder.com/50",
                startTime: "2023-11-15T14:00:00",
                endTime: "2023-11-15T17:00:00",
                location: "北京市海淀区清华大学就业中心",
                mode: "线下宣讲",
                tags: ["互联网", "名企"],
                status: "upcoming",
                targetSchools: ["清华大学", "北京大学"],
                targetMajors: ["计算机科学", "软件工程"],
                companyIndustry: "互联网/IT",
                companySize: "10000人以上",
                companyDescription: "<p>腾讯是中国最大的互联网综合服务提供商之一，也是中国最大的互联网公司之一。</p>",
                description:
                    "<p>本次宣讲会将介绍腾讯2024届校园招聘计划，包括公司概况、产品方向、招聘岗位、薪资福利等信息。</p>",
                positions: [
                    {
                        name: "后端开发工程师",
                        count: 20,
                        workLocation: "北京/深圳/上海",
                        education: "本科及以上",
                        majors: ["计算机科学", "软件工程"],
                        description: "<p>负责腾讯核心业务的后端系统开发和维护。</p>",
                        requirements: "<p>1. 熟悉至少一种编程语言，如C++/Java/Go等；</p>",
                    },
                ],
            },
            {
                id: "2",
                title: "2023秋季校园招聘",
                companyName: "阿里巴巴",
                companyLogo: "https://via.placeholder.com/50",
                startTime: "2023-11-20T10:00:00",
                endTime: "2023-11-20T16:00:00",
                location: "杭州市西湖区浙江大学就业中心",
                mode: "线下宣讲",
                tags: ["互联网", "电商"],
                status: "upcoming",
                targetSchools: ["浙江大学", "杭州电子科技大学"],
                targetMajors: ["计算机科学", "软件工程", "电子商务"],
                companyIndustry: "互联网/电子商务",
                companySize: "10000人以上",
                companyDescription: "<p>阿里巴巴集团是一家提供电子商务在线交易平台的公司。</p>",
                description: "<p>阿里巴巴2024届校园招聘火热进行中！</p>",
                positions: [
                    {
                        name: "Java开发工程师",
                        count: 25,
                        workLocation: "杭州/北京/上海",
                        education: "本科及以上",
                        majors: ["计算机科学", "软件工程"],
                        description: "<p>负责阿里电商、支付、物流等核心系统的后端开发。</p>",
                        requirements: "<p>1. 熟悉Java语言和相关技术栈；</p>",
                    },
                ],
            },
        ];

        const newItems = [...mockHireData];

        // 如果已经加载过一次，则模拟没有更多数据
        if (hireList.value.length > 0) {
            noMore.value = true;
        } else {
            hireList.value.push(...newItems);
        }

        totalCount.value = newItems.length;
        loading.value = false;
        disabled.value = false;

        // 首次加载时，默认选中第一项
        if (hireList.value.length > 0 && !selectedHireId.value) {
            selectHire(hireList.value[0].id);
        }
    }, 1000);
};

// 处理报名
const handleApply = (id) => {
    console.log("报名活动:", id);
    // 实际项目中应调用报名API
    ElMessage.success("报名成功！");
};

// 处理收藏
const handleCollect = (id) => {
    console.log("收藏活动:", id);
    // 实际项目中应调用收藏API
    ElMessage.success("收藏成功！");
};

// 处理分享
const handleShare = (data) => {
    console.log("分享活动:", data);
    // 实际项目中可能需要记录分享数据
    ElMessage.success("分享链接已复制！");
};

// 跳转到详情页
const goToDetailPage = (id) => {
    router.push({
        path: "/schoolHireInfo",
        query: { id },
    });
};

// 跳转到职位详情页面
const goToJobInfo = (id) => {
    router.push({
        path: "/jobInfo",
        query: { id },
    });
};

// 跳转到公司详情页面
const goToCompanyInfo = (id) => {
    router.push({
        path: "/companyInfo",
        query: { id },
    });
};

// 页面平滑滚动效果
const scrollToSection = (elementId) => {
    const element = document.getElementById(elementId);
    if (element) {
        element.scrollIntoView({
            behavior: "smooth",
            block: "start",
        });
    }
};

// 骨架屏加载状态
const skeletonLoading = ref(true);

// 生命周期钩子
onBeforeMount(() => {});

onMounted(() => {
    // 加载招聘活动列表
    loadHireList();

    // 模拟页面加载完成后隐藏骨架屏
    setTimeout(() => {
        skeletonLoading.value = false;
    }, 1200);

    // 添加滚动监听器
    window.addEventListener("scroll", handleScroll);

    // 添加下拉刷新事件监听
    document.addEventListener("touchstart", handleTouchStart, { passive: true });
});

onUnmounted(() => {
    // 移除滚动监听器
    window.removeEventListener("scroll", handleScroll);

    // 移除下拉刷新相关事件监听
    document.removeEventListener("touchstart", handleTouchStart);
    document.removeEventListener("touchmove", handleTouchMove);
    document.removeEventListener("touchend", handleTouchEnd);
});

// 处理页面滚动
const handleScroll = () => {
    scrollTop.value = window.pageYOffset || document.documentElement.scrollTop;
    showBackToTop.value = scrollTop.value > 300;
};

// 返回页面顶部
const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};
</script>

<template>
    <div class="scroll_main" @touchstart="handleTouchStart">
        <!-- 下拉刷新指示器 -->
        <div
            class="pull-refresh-indicator"
            :style="{ height: `${refreshDistance}px`, opacity: refreshDistance / refreshThreshold }"
            v-if="refreshDistance > 0"
        >
            <div class="refresh-icon-container">
                <el-icon
                    :class="['refresh-icon', { 'refresh-icon-rotate': isRefreshing }]"
                    :style="{ transform: isRefreshing ? 'rotate(1turn)' : `rotate(${refreshDistance * 2}deg)` }"
                >
                    <component :is="ElementPlusIconsVue.Refresh" />
                </el-icon>
                <div class="refresh-text">
                    {{
                        isRefreshing ? "正在刷新..." : refreshDistance >= refreshThreshold ? "释放立即刷新" : "下拉刷新"
                    }}
                </div>
            </div>
        </div>

        <div class="school-hire-page">
            <!-- 头部导航 -->
            <headerIndex></headerIndex>

            <!-- 主要内容区域 -->
            <el-main class="hire-main">
                <el-row justify="center">
                    <el-col :xs="24" :sm="24" :md="24" :lg="22" :xl="20" class="main-wrapper">
                        <!-- 顶部横幅 -->
                        <el-card shadow="never" class="banner-card">
                            <SchoolHireBanner />
                        </el-card>

                        <!-- 活动列表组件 -->
                        <transition name="fade-fast" mode="out-in">
                            <SchoolHireActivityList />
                        </transition>

                        <!-- 推荐区域 -->
                        <el-divider>
                            <el-space :size="10" alignment="center">
                                <el-icon><component :is="ElementPlusIconsVue.Promotion" /></el-icon>
                                <span>更多推荐</span>
                            </el-space>
                        </el-divider>

                        <!-- 热门校招 -->
                        <el-card shadow="hover" class="recommendation-card hot-jobs-card">
                            <template #header>
                                <div class="card-header">
                                    <el-space :size="10" alignment="center">
                                        <el-icon color="#409EFF"
                                            ><component :is="ElementPlusIconsVue.Promotion"
                                        /></el-icon>
                                        <h3>热门校招职位</h3>
                                    </el-space>
                                    <el-button text @click="router.push('/hotHire')">查看更多</el-button>
                                </div>
                            </template>

                            <!-- 分类标签 -->
                            <el-tabs v-model="activeJobCategory" class="job-category-tabs">
                                <el-tab-pane label="综合" name="all"></el-tab-pane>
                                <el-tab-pane label="管培生" name="management"></el-tab-pane>
                                <el-tab-pane label="教师" name="teacher"></el-tab-pane>
                                <el-tab-pane label="银行" name="bank"></el-tab-pane>
                                <el-tab-pane label="国企" name="stateOwned"></el-tab-pane>
                                <el-tab-pane label="外企" name="foreign"></el-tab-pane>
                            </el-tabs>

                            <!-- 职位列表 -->
                            <transition name="fade-fast" mode="out-in">
                                <div v-if="skeletonLoading" class="job-skeleton-container">
                                    <el-row :gutter="20">
                                        <el-col
                                            v-for="i in 8"
                                            :key="i"
                                            :xs="24"
                                            :sm="12"
                                            :md="8"
                                            :lg="6"
                                            class="job-col"
                                        >
                                            <el-card shadow="hover" class="job-item-card">
                                                <div class="skeleton-item" style="width: 70%; height: 20px"></div>
                                                <div class="skeleton-item" style="width: 40%; height: 16px"></div>
                                                <div class="skeleton-item" style="width: 100%; height: 40px"></div>
                                                <div
                                                    class="skeleton-item"
                                                    style="width: 90%; height: 16px; margin-top: 20px"
                                                ></div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </div>
                                <el-empty v-else-if="filteredJobs.length === 0" description="暂无符合条件的职位">
                                    <el-button @click="activeJobCategory = 'all'">查看全部</el-button>
                                </el-empty>
                                <el-row v-else :gutter="20">
                                    <el-col
                                        v-for="(job, index) in filteredJobs"
                                        :key="index"
                                        :xs="24"
                                        :sm="12"
                                        :md="8"
                                        :lg="6"
                                        class="job-col"
                                    >
                                        <el-card shadow="hover" class="job-item-card" @click="goToJobInfo(job.id)">
                                            <div class="job-header">
                                                <div class="job-title">{{ job.title }}</div>
                                                <div class="job-salary">{{ job.salary }}</div>
                                            </div>

                                            <div class="job-meta">
                                                <el-tag size="small" effect="plain" class="job-tag">
                                                    <el-icon style="margin-right: 4px"
                                                        ><component :is="ElementPlusIconsVue.Location"
                                                    /></el-icon>
                                                    {{ job.location }}
                                                </el-tag>
                                                <el-tag size="small" effect="plain" class="job-tag">{{
                                                    job.experience
                                                }}</el-tag>
                                                <el-tag size="small" effect="plain" class="job-tag">{{
                                                    job.education
                                                }}</el-tag>
                                            </div>

                                            <div class="company-info">
                                                <div class="company-left">
                                                    <el-avatar
                                                        :size="24"
                                                        :src="job.companyLogo"
                                                        class="company-logo"
                                                        @click.stop="goToCompanyInfo(job.companyId)"
                                                    />
                                                    <span
                                                        class="company-name"
                                                        @click.stop="goToCompanyInfo(job.companyId)"
                                                        >{{ job.companyName }}</span
                                                    >
                                                </div>
                                                <div class="company-right">
                                                    <el-tag
                                                        type="success"
                                                        size="small"
                                                        effect="light"
                                                        class="company-status"
                                                        v-if="job.companyStatus"
                                                        >{{ job.companyStatus }}</el-tag
                                                    >
                                                </div>
                                            </div>

                                            <!-- 添加操作按钮 -->
                                            <div class="job-actions">
                                                <el-button
                                                    type="info"
                                                    size="small"
                                                    circle
                                                    :icon="ElementPlusIconsVue.Star"
                                                    @click.stop="collectJob(job.id, $event)"
                                                    title="收藏职位"
                                                ></el-button>
                                                <el-button
                                                    type="primary"
                                                    size="small"
                                                    circle
                                                    :icon="ElementPlusIconsVue.Share"
                                                    @click.stop="shareJob(job, $event)"
                                                    title="分享职位"
                                                ></el-button>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                            </transition>
                        </el-card>

                        <!-- 校招直播 -->
                        <el-card shadow="hover" class="recommendation-card">
                            <template #header>
                                <div class="card-header">
                                    <el-space :size="10" alignment="center">
                                        <el-icon color="#409EFF"
                                            ><component :is="ElementPlusIconsVue.VideoPlay"
                                        /></el-icon>
                                        <h3>校园招聘直播</h3>
                                    </el-space>
                                    <el-button text>查看更多</el-button>
                                </div>
                            </template>
                            <transition name="fade-fast" mode="out-in">
                                <div v-if="skeletonLoading" class="live-skeleton">
                                    <div
                                        v-for="i in 3"
                                        :key="i"
                                        class="skeleton-item"
                                        style="height: 80px; margin-bottom: 15px"
                                    ></div>
                                </div>
                                <SchoolHireLive v-else />
                            </transition>
                        </el-card>

                        <!-- 热门公司 -->
                        <el-card shadow="hover" class="recommendation-card">
                            <template #header>
                                <div class="card-header">
                                    <el-space :size="10" alignment="center">
                                        <el-icon color="#409EFF"
                                            ><component :is="ElementPlusIconsVue.OfficeBuilding"
                                        /></el-icon>
                                        <h3>热门招聘企业</h3>
                                    </el-space>
                                    <el-button text>查看更多</el-button>
                                </div>
                            </template>
                            <transition name="fade-fast" mode="out-in">
                                <div v-if="skeletonLoading" class="company-skeleton">
                                    <el-row :gutter="20">
                                        <el-col v-for="i in 6" :key="i" :xs="12" :sm="8" :md="6" :lg="4">
                                            <div
                                                class="skeleton-item"
                                                style="height: 80px; margin-bottom: 15px; border-radius: 8px"
                                            ></div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <SchoolHireCompany v-else />
                            </transition>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
            <!-- 页脚 -->
            <footerIndex></footerIndex>
        </div>
        <!-- 自定义回到顶部按钮 -->
        <transition name="fade">
            <div v-show="showBackToTop" class="back-to-top-wrapper" @click="scrollToTop">
                <div class="back-to-top-container">
                    <el-button type="primary" circle class="back-to-top-btn pulse-animation">
                        <el-icon><component :is="ElementPlusIconsVue.CaretTop" /></el-icon>
                    </el-button>
                    <span class="back-to-top-text">返回顶部</span>
                </div>
            </div>
        </transition>
        <el-backtop :bottom="80" target=".scroll_main" :visibility-height="300" />
    </div>
</template>

<style scoped>
/* 全局容器样式 */
.school-hire-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f7fa;
    overflow-x: hidden;
}

/* 主要内容区域 */
.hire-main {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f5f7fa;
    width: 100%;
    overflow-x: hidden;
}

.main-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 卡片通用样式 - 优化阴影和过渡效果 */
.banner-card,
.filter-card,
.view-switch-card,
.list-card,
.detail-card,
.calendar-card,
.calendar-detail-card,
.recommendation-card {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 100%;
    box-sizing: border-box;
    border: none;
}

.filter-card:hover,
.view-switch-card:hover,
.list-card:hover,
.detail-card:hover,
.calendar-card:hover,
.calendar-detail-card:hover,
.recommendation-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

/* 卡片头部样式 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    position: relative;
}

.card-header h3::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 30px;
    height: 3px;
    background: linear-gradient(90deg, #409eff, #79bbff);
    border-radius: 3px;
}

/* 视图标签页样式 */
.view-tabs {
    margin-bottom: 20px;
}

.view-tabs:deep(.el-tabs__header) {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.view-tabs:deep(.el-tabs__item.is-active) {
    color: #409eff;
    font-weight: 600;
}

.view-tabs:deep(.el-tabs__active-bar) {
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #409eff, #79bbff);
}

.view-tabs :deep(.el-tabs__item) {
    font-size: 16px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    transition: all 0.3s;
}

.view-tabs :deep(.el-tabs__item:hover) {
    color: #409eff;
}

.tab-pane {
    padding: 5px 0;
}

/* 列表和详情容器 */
.hire-list-col,
.hire-detail-col {
    margin-bottom: 20px;
}

/* 滚动条样式 */
.hire-scrollbar {
    width: 100%;
    box-sizing: border-box;
}

.hire-scrollbar :deep(.el-scrollbar__wrap),
.detail-scrollbar :deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
}

.detail-scrollbar {
    width: 100%;
}

/* 加载状态样式 */
.loading-placeholder {
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    background: #fff;
}

/* 骨架屏加载动画 */
.skeleton-item {
    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    height: 16px;
    margin-bottom: 8px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 日历视图相关样式 */
.calendar-detail-row {
    margin-top: 20px;
}

/* 分隔线样式 */
.el-divider {
    margin: 40px 0 25px;
}

.el-divider :deep(.el-divider__text) {
    background-color: #f5f7fa;
    color: #606266;
    font-size: 16px;
    font-weight: 600;
    padding: 0 20px;
    position: relative;
}

.el-divider :deep(.el-divider__text)::before,
.el-divider :deep(.el-divider__text)::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 15px;
    height: 2px;
    background: #dcdfe6;
}

.el-divider :deep(.el-divider__text)::before {
    left: 0;
}

.el-divider :deep(.el-divider__text)::after {
    right: 0;
}

/* 推荐区域卡片样式 */
.recommendation-card {
    margin-bottom: 30px;
    position: relative;
    overflow: visible;
}

.recommendation-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, #409eff, #79bbff);
    border-radius: 4px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.recommendation-card:hover::before {
    opacity: 1;
}

.recommendation-card .card-header {
    margin-bottom: 15px;
    padding-left: 5px;
}

/* 热门校招卡片样式 */
.hot-jobs-card {
    padding-bottom: 10px;
}

.job-category-tabs {
    margin-bottom: 20px;
}

.job-category-tabs :deep(.el-tabs__header) {
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
}

.job-category-tabs :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
    background-color: transparent;
}

.job-category-tabs :deep(.el-tabs__active-bar) {
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #409eff, #79bbff);
}

.job-category-tabs :deep(.el-tabs__item) {
    font-size: 15px;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    transition: all 0.3s;
}

.job-category-tabs :deep(.el-tabs__item:hover) {
    color: #409eff;
}

.job-category-tabs :deep(.el-tabs__item.is-active) {
    font-weight: 600;
}

.job-col {
    margin-bottom: 20px;
}

.job-item-card {
    height: 100%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.job-item-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 2px transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
    pointer-events: none;
}

.job-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.job-item-card:hover::after {
    box-shadow: 0 0 0 2px #409eff;
}

.job-item-card :deep(.el-card__body) {
    padding: 16px;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.job-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    line-height: 1.4;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.3s;
}

.job-item-card:hover .job-title {
    color: #409eff;
}

.job-salary {
    color: #f56c6c;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 10px;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.job-tag {
    background-color: #f5f7fa;
    color: #606266;
    border-color: #e4e7ed;
    transition: all 0.3s;
}

.job-item-card:hover .job-tag {
    background-color: #ecf5ff;
    color: #409eff;
    border-color: #d9ecff;
}

.company-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed #ebeef5;
}

.company-left {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.company-logo {
    flex-shrink: 0;
    margin-right: 8px;
    border: 1px solid #ebeef5;
    transition: all 0.3s;
}

.job-item-card:hover .company-logo {
    border-color: #409eff;
    transform: scale(1.05);
}

.company-name {
    font-size: 14px;
    color: #606266;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.3s;
}

.company-name:hover {
    color: #409eff;
    text-decoration: underline;
}

.company-right {
    margin-left: 10px;
}

.company-status {
    white-space: nowrap;
    transition: all 0.3s;
}

.job-item-card:hover .company-status {
    background-color: #f0f9eb;
    color: #67c23a;
    border-color: #e1f3d8;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hire-main {
        padding: 15px;
    }

    .filter-card,
    .view-switch-card {
        margin-bottom: 15px;
    }

    .view-tabs :deep(.el-tabs__item) {
        font-size: 14px;
        padding: 0 15px;
    }

    .el-divider {
        margin: 30px 0 20px;
    }

    .card-header h3 {
        font-size: 16px;
    }

    .job-category-tabs :deep(.el-tabs__item) {
        padding: 0 10px;
        font-size: 14px;
    }
}

/* 超小屏设备调整 */
@media (max-width: 480px) {
    .hire-main {
        padding: 10px;
    }

    .banner-card,
    .filter-card,
    .view-switch-card {
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .card-header h3 {
        font-size: 15px;
    }

    .hire-scrollbar,
    .detail-scrollbar {
        height: calc(100vh - 480px) !important;
    }

    .job-category-tabs :deep(.el-tabs__item) {
        padding: 0 8px;
        font-size: 13px;
    }

    .job-title {
        font-size: 15px;
    }

    .job-salary {
        font-size: 14px;
    }

    .company-name {
        font-size: 13px;
    }
}

/* 动画效果 */
.hire-list-col,
.hire-detail-col {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 自定义组件样式 */
:deep(.el-card) {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
    border: none;
}

:deep(.el-button) {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s;
}

:deep(.el-button--primary) {
    background: linear-gradient(135deg, #409eff, #007bff);
    border: none;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

:deep(.el-button--primary:hover) {
    background: linear-gradient(135deg, #007bff, #409eff);
    box-shadow: 0 6px 16px rgba(64, 158, 255, 0.35);
    transform: translateY(-2px);
}

:deep(.el-button--primary:active) {
    transform: translateY(0);
}

/* 返回顶部按钮样式 */
.back-to-top-wrapper {
    position: fixed;
    right: 40px;
    bottom: 80px;
    z-index: 2000;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(0.9);
    cursor: pointer;
}

.back-to-top-wrapper:hover {
    transform: translateY(-5px) scale(1.05);
}

.back-to-top-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.back-to-top-btn {
    background: linear-gradient(135deg, #409eff, #007bff);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
    border: none;
    transition: all 0.3s;
    margin-bottom: 4px;
    width: 50px;
    height: 50px;
}

.back-to-top-btn:hover {
    background: linear-gradient(135deg, #007bff, #409eff);
    box-shadow: 0 8px 20px rgba(64, 158, 255, 0.5);
    transform: translateY(-2px);
}

.back-to-top-btn:active {
    transform: translateY(0);
}

.back-to-top-text {
    font-size: 12px;
    color: #606266;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 2px 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s;
}

.back-to-top-container:hover .back-to-top-text {
    opacity: 1;
    transform: translateY(0);
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s, transform 0.5s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
}

.fade-fast-enter-active,
.fade-fast-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}

.fade-fast-enter-from,
.fade-fast-leave-to {
    opacity: 0;
    transform: translateY(5px);
}

/* 响应式设计 - 返回顶部按钮 */
@media (max-width: 768px) {
    .back-to-top-btn {
        width: 45px;
        height: 45px;
    }

    .back-to-top-text {
        display: none;
    }
}

@media (max-width: 480px) {
    .back-to-top-btn {
        width: 40px;
        height: 40px;
    }

    .back-to-top-wrapper {
        right: 20px !important;
        bottom: 60px !important;
    }
}

/* 添加新样式 */
.toolbar-wrapper {
    margin-bottom: 20px;
}

.toolbar-card {
    margin-bottom: 20px;
    border-radius: 12px;
}

.toolbar-card:deep(.el-card__body) {
    padding: 15px;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.filter-buttons .el-select {
    width: 120px;
}

.sort-buttons {
    display: flex;
    justify-content: flex-end;
    margin: 15px 0;
}

.calendar-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-title {
    font-size: 18px;
    font-weight: 600;
}

.calendar-actions {
    display: flex;
    justify-content: flex-end;
}

.calendar-detail-card {
    margin-top: 20px;
}

.coming-soon-icon {
    color: #c0c4cc;
    margin-bottom: 20px;
}

.coming-soon-text {
    color: #909399;
    text-align: center;
    line-height: 1.6;
}

.map-card {
    padding: 40px 0;
}

/* 响应式样式调整 */
@media (max-width: 768px) {
    .filter-buttons,
    .sort-buttons {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .filter-buttons .el-select {
        width: 100%;
        margin-bottom: 10px;
    }

    .calendar-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .calendar-actions {
        margin-top: 15px;
        width: 100%;
        justify-content: flex-start;
    }
}

/* 添加脉冲动画效果 */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* 下拉刷新相关样式 */
.pull-refresh-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #f0f9ff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: height 0.3s;
    overflow: hidden;
}

.refresh-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.refresh-icon {
    font-size: 24px;
    color: #409eff;
    transition: transform 0.3s;
}

.refresh-icon-rotate {
    animation: rotate 1.5s infinite linear;
}

.refresh-text {
    margin-top: 8px;
    font-size: 14px;
    color: #606266;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 职位卡片操作按钮 */
.job-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}

.job-item-card {
    position: relative;
}

.job-item-card:hover .job-actions {
    opacity: 1;
    transform: translateY(0);
}

.job-actions .el-button {
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    transition: all 0.3s;
}

.job-actions .el-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.job-actions .el-button:active {
    transform: scale(0.95);
}

/* 添加悬浮卡片效果 */
.job-item-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background-color: #fff;
}

.job-item-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 12px;
    background: linear-gradient(135deg, #409eff, #79bbff);
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.job-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.job-item-card:hover::before {
    opacity: 0.5;
    transform: scale(1.1);
}

/* 添加标签栏固定效果 */
.job-category-tabs {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    padding: 10px 0;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: all 0.3s;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.job-category-tabs.sticky {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
</style>
